<template>
  <div id="app">
    <!-- <el-card shadow="hover" class="mgb20"> -->
    <div v-if="ismodify" class="userinfo">
      <ul class="infoBox">
        <li class="item">
          <div class="labal">{{$t("home.headPortraits")}}：</div>
          <div class="content headImg">
            <img
              style="width: 50px; height: 50px; border-radius: 50%"
              :src="uInfo.headUrl"
              alt=""
            />
            {{ uInfo.headStatus | filtersStauts }}
            <!-- 0 申请 1 审核通过 2审核未通过 -->
          </div>
        </li>
        <li class="item">
          <div class="labal">{{$t("home.penName")}}：</div>
          <div class="content">
            <p>{{ uInfo.userName }} {{ uInfo.nameStatus | filtersStauts }}</p>
          </div>
        </li>
        <li class="item">
           <div class="labal">{{$t("home.name")}}：</div>
          <div class="content">
            <p>{{ uInfo.authorInfo.realName }}</p>
          </div>
        </li>
        <li class="item">
          <div class="labal">{{$t("home.sex")}}：</div>
          <div v-if="uInfo.authorInfo" class="content">
            <p>{{ uInfo.authorInfo.sex == 1 ? $t('home.man') : "" }}</p>
            <p>{{ uInfo.authorInfo.sex == 2 ? $t('home.woman') : "" }}</p>
          </div>
        </li>
        <li class="item">
          <div class="labal">{{$t("home.phone")}}：</div>
          <div v-if="uInfo.authorInfo" class="content">
            <p>{{ uInfo.authorInfo.phone }}</p>
          </div>
        </li>
        <li class="item">
          <div class="labal">{{$t("home.email")}}：</div>
          <div v-if="uInfo.authorInfo" class="content">
            <p>{{ uInfo.authorInfo.email }}</p>
          </div>
        </li>
        <li class="item">
          <div class="labal">QQ：</div>
          <div v-if="uInfo.authorInfo" class="content">
            <p>{{ uInfo.authorInfo.qq }}</p>
          </div>
        </li>
        <li class="item">
          <div class="labal">{{$t("home.weChat")}}：</div>
          <div class="content">
            <p>{{ uInfo.isWeChat ? $t('home.isBinding') : $t('home.notBound') }}</p>
          </div>
        </li>
        <li class="item">
          <div class="labal">{{$t("home.contactAddress")}}：</div>
          <div v-if="uInfo.authorInfo" class="content">
            <p>
              {{
                uInfo.authorInfo.address ? uInfo.authorInfo.address : $t('home.notFilled')
              }}
            </p>
          </div>
        </li>
        <li class="item">
         <div class="labal">{{$t("home.profile")}}：</div>
          <div v-if="uInfo.authorInfo" class="content">
            <p>
              {{
                uInfo.authorInfo.personalDes
                  ? uInfo.authorInfo.personalDes
                  : $t('home.notFilled')
              }}
            </p>
          </div>
        </li>
      </ul>
      <div class="type"><button @click="changeModify">{{$t("home.immediatelyChange")}}</button></div>
    </div>
    <div v-else class="reuserinfo">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        label-position="left"
      >
        <el-form-item :label="$t('home.headPortraits')" prop="avatar">
          <div style="display: flex; flex-direction: row">
            <el-upload
              class="avatar-uploader"
              style="display: inline-block"
              action="javasprict:;"
              :show-file-list="false"
              :http-request="upLoadImg"
               v-if="ruleForm.headImgUrl == ''"
            >
              
              <img
                class="avatar"
                src="../../../../assets/author/avatar.png"
                alt=""
              />
            </el-upload>
            <img
                 v-else
                :src="ruleForm.headImgUrl"
                class="avatar"
              />
              <!-- {{ruleForm.headImgUrl}} -->
            <div
              style="
                margin-left: 10px;
                font-size: 14px;
                font-weight: 400;
                color: #cccccc;
                line-height: 20px;
              "
            >
              {{$t("home.jpgOrPngFile5")}}<br />
              {{$t("home.notUploadProfile")}}<br />
              {{$t("home.approvedDisplayed")}}<br />
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('home.penName')" prop="userName">
          <el-input
            prop="userName"
            :placeholder="$t('home.penName')"
            v-model="ruleForm.userName"
            :disabled="!uInfo.nameStatus ? true : ''"
            v-if="uInfo.nameStatus == '3' || uInfo.nameStatus == '4'"
          ></el-input>
           <div class="penName_box" v-else>
            {{ruleForm.userName}}
            <!-- <div class="penName_text">
              <span>*签约作者修改笔名请联系编辑</span>  
              <span>*距离上次申请未超过30日，不可修改</span> 
            </div> -->
            <div class="under_review">审核中</div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('home.realName')" prop="realName">
          <el-input
            prop="realName"
            :placeholder="$t('home.realName')"
            v-model="ruleForm.realName"
          ></el-input>
        </el-form-item>
       
       
         <el-form-item :label="$t('home.email')" prop="email">
          <el-input :placeholder="$t('home.enterEmail')" v-model="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item label="QQ" prop="qq">
          <el-input
            oninput="if(ruleForm.qq.length>12)ruleForm.qq=ruleForm.qq.slice(0,12)"
            type="number"
            :placeholder="$t('home.enterQQ')"
            v-model="ruleForm.qq"
          ></el-input>
        </el-form-item>

         <el-form-item :label="$t('home.sex')" prop="sex">
          <span slot="label">{{$t('home.sex')}}</span>
          <span slot="label" class="optional_text">{{$t('home.optionalFilling')}}</span>
          <el-radio v-model="ruleForm.sex" :label="1">{{$t("home.man")}}</el-radio>
          <el-radio v-model="ruleForm.sex" :label="2">{{$t("home.woman")}}</el-radio>
        </el-form-item>

         <el-form-item :label="$t('home.phone')" prop="phone">
           <span slot="label">{{$t('home.phone')}}</span>
           <span slot="label" class="optional_text">{{$t('home.optionalFilling')}}</span>
          <el-input
            :placeholder="$t('home.contact')"
            v-model="ruleForm.phone"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item :label="$t('home.weChat')">
          <p>{{$t("home.isBinding")}}</p>
        </el-form-item> -->
        <el-form-item :label="$t('home.contactAddress')">
            <div slot="label">{{$t('home.contactAddress')}}</div>
            <div slot="label" class="optional_text">{{$t('home.optionalFilling')}}</div>
            <el-input
            :placeholder="$t('home.fillFullAddress')"
            style="position: relative"
            v-model="ruleForm.address"
          >
          </el-input>
          <!-- <el-input
            :placeholder="$t('home.fillFullAddress')"
            style="position: relative"
            maxlength="200"
            type="textarea"
            v-model="ruleForm.address"
          >
          </el-input>
          <p style="position: absolute; bottom: 0; right: 20px">
            {{ ruleForm.address.length }}/200
          </p> -->
        </el-form-item>
        <el-form-item :label="$t('home.profile')">
          <div slot="label">{{$t('home.profile')}}</div>
            <div slot="label" class="optional_text">{{$t('home.optionalFilling')}}</div>
          <el-input
            :placeholder="$t('home.profileInfo')"
            class="produce"
            style="position: relative"
            maxlength="200"
            type="textarea"
            v-model="ruleForm.personalDes"
          >
          </el-input>
          <p style="position: absolute; bottom: 0; right: 20px">
            {{ ruleForm.personalDes.length }}/200
          </p>
        </el-form-item>

          <div class="button_box">
            <el-button type="info" @click="cancel()">{{$t("home.cancel")}}</el-button>

              <el-button type="primary" @click="submitForm('ruleForm')"
                >{{$t("home.confirmModification")}}</el-button
              >
          </div>
         
      </el-form>
    </div>
    <!-- </el-card> -->
  </div>
</template>

<script>
let that
import { getAuthorInfo, baseModify, uploadFile } from "@/api/info";
export default {
  filters: {
    filtersStauts: function (value) {
      switch (value) {
        case 0:
          return that.$t('home.underReview');
          break;
        case 1:
          return "";
          break;
        case 2:
          return that.$t('home.failedAudit');
          breakk;
      }
    },
  },
  beforeCreate() {
    that = this;
  },
  data() {
    return {
      importHeaders: {
        authorization: this.$store.state.userInfo.token,
      },
      ismodify: false,
      defaultSrc:
        "https://sponsor-static.segmentfault.com/86a060293605188fd8ff27a17ec0750e.png",
      imgSrc: "",
      imageUrl: "",
      uInfo: {},
      ruleForm: {
        sex: "",
        email: "",
        qq: "",
        address: "",
        personalDes: "",
        realName: "",
        phone: "",
        headImgUrl: "",
        isWeChat: "",
        userName: "",
      },
      getCode: {
        value: this.$t('home.getCaptcha'),
        disabled: false,
      },
      rules: {
        realName: [
          {
            required: true,
            message: this.$t('home.pleaseEnterYourName'),
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: this.$t('home.illegalName'),
            trigger: "blur",
          },
        ],
        qq: [
          {
            required: true,
            message: this.$t('home.enterQQ'),
            trigger: "blur",
          },
          {
            min: 5,
            max: 12,
            message: this.$t('home.realQQNumber'),
            trigger: "blur",
          },
        ],
        // 笔名
         userName: [
          {
            required: true,
            message: this.$t('home.pleaseEnterUserName'),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    cancel() {
      this.ismodify = true;
    },
    timeOver() {
      var that = this;
      var timeo = 60;
      this.getCode.disabled = true;
      var timeStop = setInterval(function () {
        timeo--;
        if (timeo > 0) {
          // that.text('重新发送' + timeo +'s');
          // this.$set(getCode,value,'重新发送' + timeo +'s')
         that.getCode.value = that.$t('home.resend') + timeo + "s";
        } else {
          timeo = 60; //当减到0时赋值为60
          that.$set(getCode, value, that.$t('home.getCode'));
          // this.getCode.value = '获取验证码'
          clearInterval(timeStop); //清除定时器
          that.getCode.disabled = false;
        }
      }, 1000);
    },
    changeModify() {
      this.ruleForm = this.uInfo.authorInfo
      this.ruleForm.isWeChat = this.uInfo.isWeChat
      this.ruleForm.headImgUrl = this.uInfo.headUrl
      this.ismodify = false;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          baseModify(this.ruleForm).then((res) => {
            if (res.code == 1) {
              this.ismodify = true;
              this.$message({
               message: this.$t('home.modifySuccessfully'),
                type: "success",
              });
              this.getUserInfo();
            }
          });
        } else {
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    upLoadImg(res) {
      const isJPG = res.file.type === "image/jpeg";
      const isPng = res.file.type === "image/png";
      const isLt2M = res.file.size / (1024 * 1024) <= 5;
      let newImg = new Image();
      let that = this;
      newImg.src = URL.createObjectURL(res.file);

      newImg.onload = function () {
        if ((isJPG || isPng) && isLt2M) {
         that.ruleForm.headImgUrl = URL.createObjectURL(res.file);
          let fromData = new FormData();
          fromData.append("file", res.file);
          uploadFile(fromData).then((res) => {
           that.ruleForm.headImgUrl = res.source;
          });
        } else {
          that.$message.error(this.$t('home.uploadProfilePictures'));
          return false;
        }
      };
    },
    getUserInfo() {
      getAuthorInfo().then((res) => {
        this.$store.state.userInfo.phone = res.source.authorInfo.phone;
        this.$store.state.userInfo.userName = res.source.userName;
        this.$store.state.userInfo.realName = res.source.authorInfo.realName;
        this.uInfo = res.source;
      });
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>
<style lang="scss" scoped="scoped">
::v-deep .el-radio__inner{
  width: 24px;
  height: 24px;
}
::v-deep .el-radio__label{
  font-size: 18px;
  color: #000;
}
 ::v-deep .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width: 10px;
    height: 5px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 6px;
    left: 5px;
    vertical-align: middle;
    transform: rotate(-45deg);
        border-radius: 0px;
    background: none;
   
}
::v-deep .el-form-item__content{
  width: 100%;
  display: flex;
  // justify-content: center;
  // margin-bottom: 30px;
  align-items: center;
  margin-left: 22px !important;
}
::v-deep .el-form-item{
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.el-button{
  height: 48px;
  width: 221px;
  font-size: 18px;
  // line-height: 48px;
}
::v-deep .el-input__inner{
  height: 48px;
  border-radius: 8px;
  line-height: 48px;
}
::v-deep .el-form-item__label{
  font-size: 18px;
  color:#000;
  text-align: right;
}
.headImg {
  line-height: 50px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
  background: #a9a9a9;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.userinfo {
  .infoBox {
    display: flex;
    flex-direction: column;

    .item {
      display: flex;
      flex-direction: row;
      margin: 10px 0;

      .labal {
        display: flex;
        width: 130px;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center;
        padding-left: 30px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000;
      }

      .content {
        margin-left: 10px;

        p {
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  .type {
    // background: yellow;
    margin-top: 20px;
    text-align: center;

    button {
      margin-bottom: 50px;
      width: 398px;
      height: 48px;
      background: #3385FD;
      border-radius: 8px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      border: none;
      border: 0;
      outline: none;
    }
  }
}
.penName_box{
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #000;
}
.penName_text{
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: #999;
  line-height: 20px;
  margin-left: 10px;
}
.optional_text{
  color: #999;
}
.produce{
::v-deep  .el-textarea__inner{
    height: 154px;
  }
}
.button_box{
  display: flex;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 60px;
  .el-button{
    border-radius: 8px;
  }
  .el-button--info{
    background-color: #ccc;
    color: #fff;
  }
  .el-button--info:hover{
    border-color:#ccc
  }
}
.under_review{
  font-size: 18px;
  color: #EB6405;
  margin-left: 30px;
}
// #improve {
// 	width: 600px;
// 	margin: 0 auto;

// 	.title {
// 		font-size: 22px;
// 		font-family: PingFangSC-Medium, PingFang SC;
// 		font-weight: 500;
// 		color: #333333;
// 		line-height: 40px;
// 		text-align: center;
// 	}

// 	.text {
// 		text-align: center;
// 		font-size: 9px;
// 		font-family: PingFangSC-Regular, PingFang SC;
// 		font-weight: 400;
// 		color: #CCCCCC;
// 		line-height: 12px;

// 	}
// }
</style>
